<template>
	<div class="login">
		<div class="logIn">
			
			<div class="box">
				<input
				  class="input"
				  placeholder="请输入内容"
				  v-model="name"
					type="text"
				/>
				<input 
					class="input"
					placeholder="请输入密码"
					v-model="password" 
					@keydown.enter='btn'
					type="password"
				/>
				<div class="sing">
					<button type="button"  @click="btn">
						登陆
					</button>
					<button type="button"  @click="SignUP">
						注册
					</button>
				</div>
			</div>
		</div>
	</div>
	
</template>

<script lang="ts">
	import {defineComponent,reactive,toRefs,watchEffect,inject} from 'vue';
	import {ElMessage} from 'element-plus'
	import {useStore} from 'vuex'
	import {login} from '@assets/request/business'
	
	export default defineComponent({
		methods:{
			SignUP(){
				this.$router.push({
					path:'/singup'
				});
			},
			btn:async function(){
				interface obj{
					data?:string,
					state?:number
				}
				if(this.name=='' || this.password==''){
					ElMessage.error('用户名或密码不能为空！')
					return;
				}
				this.loading.cover('登陆中')
				let result:any =await login({
						name:this.name,
						password:this.password,
				});
				if(result.state == 200){
					this.Store.commit('setToken',result.data)
					this.$router.push({
						path:'/Frame/Home'
					});
				}else{
					ElMessage.error('用户名或者密码错误请重新登陆！')
				}
			}
		},
		setup(props,context){
			var loading:any=inject('loading')
			const user=reactive({
				name:'史炟',
				password:'123456'
			})
			var Store:any=useStore();
			let {name,password}=toRefs(user)
			//规范化数据
			watchEffect(()=>{
				name.value=name.value.replace(' ','')
				password.value = password.value.replace(' ','')
			})
		
			return {name,password,Store,loading}
		}
	})
</script>

<style scoped="scoped">
	.login{
		width: 100%;
		height: 100vh;
		background:linear-gradient(45deg, #e871f6, #3bc5fd);
		background-size: 100% 100%;
		overflow: hidden;
	}
	.logIn{
		width: 100vw;
		height: 100vw;
		background: url(../../../public/images/bg.png);
		background-size: 100% 100%;
		font-size: 20px;
		position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%);
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}
	.logIn .box{
		width: 40%;
		min-width: 280px;
		height: 75%;
		background-color: rgb(162 169 158 / 30%);
		box-shadow: 0 0 10px #605e5e;
		margin-right: 20px;
		border-radius: 20px;
		display: flex;
		position: relative;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color:white;
	}
	.sing{
		width: 100%;
		display: flex;
		justify-content: space-around;
	}
	.logIn .box button{
		background: #80adfb;
		border:none;
		outline: none;
		width: 40%;
		line-height: 3rem;
		font-size: 20px;
		color: #fff;
		font-weight: bold;
		margin-top: 10%;
		border-radius: 10px;
		cursor: pointer;
	}
	.logIn  .box .input{
					font-size: 18px;
					width: 90%;
			    border: none;
			    box-sizing: border-box;
					margin-top: 40px;
			    line-height: 3rem;
			    color: #84abfb;
					text-align: center;
			    padding-left: 0.15rem;
			    /* box-shadow: 0 0 1px #00eaff; */
			    outline: none;
			    -webkit-tap-highlight-color: rgba(255,0,0,0);
					background-size: 100% 100%;
	}

	@media (min-width:600px) { 
		.logIn{
			height: 50vw;
			width: 75vw;
		}
	}
	@media (max-width:600px) {
		.logIn{
			height: 80vh;
			width: 110vh;
		}
		.logIn  .box{
			width: 90vw;
			margin:auto;
		}
	}
</style>
